/*
 * @Author: fhw
 * @Date: 2022-07-08 11:21:35
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-02 16:44:34
 * @Description:
 */
import { computed, defineComponent, onMounted, PropType } from 'vue'
import { ArticleModule } from '@/store/modules/articleData'
import { isEmpty } from 'ramda'
import { filterOptionCaseInsensitive } from '@/utils/index'
const Props = {
	value: [String, Number] as PropType<string | number>,
	label: [String, Number] as PropType<string | number>,
	disabled: {
		type: Boolean as PropType<boolean>,
		default: false,
	},
	mode: String as PropType<string>,
	placeholder: String as PropType<string>,
	allowClear: {
		type: Boolean as PropType<boolean>,
		default: true,
	},
}
const FormArticleCategory = defineComponent({
	name: 'form-articleCategory',
	props: Props,
	emits: {
		change: null,
		'update:value': Function as (value?: string) => void,
		'update:label': Function as (value?: string) => void,
	},
	setup(props, { emit }) {
		const computeCount = computed(() => {
			return {
				list: ArticleModule.articleCategory,
			}
		})
		function onChange(value: string, option?: any) {
			if (option) {
				emit('update:value', option.value)
				emit('update:label', option.label)
			} else {
				emit('update:value', undefined)
				emit('update:label', undefined)
			}
		}
		onMounted(() => {
			if (isEmpty(ArticleModule.articleCategory)) {
				ArticleModule.getArticleCategory()
			}
		})
		return () => (
			<a-select
				onChange={onChange}
				mode={props.mode}
				disabled={props.disabled}
				allowClear={props.allowClear}
				value={props.value}
				filterOption={filterOptionCaseInsensitive}
				showSearch
				placeholder={props.placeholder}
				options={computeCount.value.list}
			/>
		)
	},
})
export default FormArticleCategory
